<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>积分礼品</title>
  <style>
    body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial; margin:0; background:#f7f8fa;}
    .wrap{max-width:800px; margin:0 auto; padding:12px;}
    .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
    .card{background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05);} 
    .pic{height:140px; background:#f2f3f5; display:flex; align-items:center; justify-content:center;}
    .pic img{max-width:100%; max-height:100%; object-fit:cover;}
    .bd{padding:10px;}
    .tit{font-size:15px; font-weight:600; color:#333;}
    .meta{margin-top:6px; color:#666; font-size:13px;}
    a.back{display:block; text-align:center; margin:14px; color:#999; text-decoration:none;}
  </style>
</head>
<body>
<div class="wrap">
  <div class="grid">
    {foreach $gifts as $g}
    <div class="card">
      <div class="pic">
        {if isset($g.image) && $g.image}
          <img src="{$g.image}" alt="{$g.name}">
        {else/}
          <span>NO IMAGE</span>
        {/if}
      </div>
      <div class="bd">
        <div class="tit">{$g.name}</div>
        <div class="meta">所需积分：{$g.points_required} · 库存：{if $g.stock==-1}不限{else/}{$g.stock}{/if}</div>
      </div>
    </div>
    {/foreach}
  </div>
  <a class="back" href="{:url('center')}">返回</a>
</div>
</body>
</html>

